<div id="handBatch_generat_cost">
    <div class="handBatch_generat_cost">
        <el-row type="flex" justify="space-between" class="title_generat_cost">
            <el-col :span="12"><div>发起收费项目</div></el-col>
            <el-col :span="12" style="text-align: right;padding-right: 30px;">
                <el-button type="primary" @click="downloadTemp">下载模板</el-button>
            </el-col>
        </el-row>

        <el-form
                class="generat-form"
                ref="generatForm"
                :rules="rules"
                :model="generatForm"
                label-width="200px"
                :label-position="labelPosition">
            <el-form-item label="项目类型：" prop="selectProjectType">
                <el-select v-model="generatForm.selectProjectType" @change="getProject" placeholder="请选择项目类型" style="width: 220px;">
                    <el-option label="请选择项目类型" value=""></el-option>
                    <el-option v-for="item in pType" :label="item.projectTypeName" :value="item.projectTypeId" ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="项目名称：" prop="selectCostName">
                <el-select v-model="generatForm.selectCostName" placeholder="请选择收费项目" style="width: 220px;">
                    <el-option v-for="item in pName" :label="item.projectName" :value="item.projectId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="请选择文件：" prop="file">
                <div id="uploadArea" style="position:relative;text-align: left;overflow: hidden">
                    <form id="uploadForm" action="" method="post" enctype="multipart/form-data" name="fileForm" >
                        <input type="file" name="file" id="file" class="inputfile" @change="filesChange"/>
                        <label for="file">选择文件</label>
                        <span class="showFileName">{{fileName}}</span>
                    </form>
                </div>
            </el-form-item>
            <el-form-item>
                <el-button :disabled="isDisabled" id="testListAction" type="danger" @click="submitForm">发起缴费</el-button>
                <el-button type="danger" class="btn-item-cancel"  @click="resetForm('generatForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>

<script>
    function isIE(){
        if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE9.0"){
            $(".main-right").empty();
            $(".main-right").load('${basePath}/handBatchIE9');
        }else{

        }
    }
    isIE();
    var handBatch_generat_cost =
        new Vue({
            el: "#handBatch_generat_cost",
            data: {
                fileName:'',
                isDisabled:false,
                pType:[],
                pName:[],
                fileList: [],
                labelPosition:'left',
                generatForm: {
                    selectProjectType:'',
                    selectCostName:'',
//                    file:''
                },
                rules: {
                    selectProjectType: [
                        { required: true, message: '请选择项目类型', trigger: 'change' }
                    ],
                    selectCostName: [
                        { required: true, message: '请选择收费项目', trigger: 'change' }
                    ],
                    file: [
                        { required: true, message: '请选择文件', trigger: 'change' }
                    ]
                },
            },
            methods: {
                // 展示选取的文件名称
                filesChange:function () {
                    var nameFlis = $("#file").val();
                    var fileName123 = nameFlis.split("\\");
                    var batchFileName = fileName123[fileName123.length-1];
                    var  extension = batchFileName.split('.')[1] === 'xls';
                    var  extension2 = batchFileName.split('.')[1] === 'xlsx';
                    if (!extension && !extension2) {
                        handBatch_generat_cost.$message.warning('上传模板只能是 xls、xlsx 格式!');
                        handBatch_generat_cost.fileName = '';
                    }else{
                        handBatch_generat_cost.fileName = batchFileName;
                    }
                },
                //发起缴费
                submitForm:function() {
                    if(!handBatch_generat_cost.generatForm.selectCostName){
                        handBatch_generat_cost.$message.warning('请选择项目类型及项目名称');
                    }else if(!handBatch_generat_cost.fileName){
                        handBatch_generat_cost.$message.warning("请选择Excel文件");
                    }else{
                        this.ajaxSubmitForm();
                    }
                },
                ajaxSubmitForm:function() {
                    handBatch_generat_cost.isDisabled = true;
                    var option = {
                        url : '${basePath}merchant/mProjectType/initiatePayment',
                        type : 'POST',
                        data:handBatch_generat_cost.generatForm,
                        dataType : 'json',
                        headers : {"ClientCallMode" : "ajax"}, //添加请求头部
                        success : function(data) {
//                            console.log(data);
                                if(data[0].status == 'success'){
                                    handBatch_generat_cost.$message.success(data[0].msg);
                                    reloadPage('${basePath}merchant/mProjectType/enterBatchGeneratCost');
                                }else{
                                    handBatch_generat_cost.$message.error(data[0].msg);
                                    handBatch_generat_cost.fileName = '';
                                }
                                handBatch_generat_cost.isDisabled = false;
                        },
                        error: function(data) {
                            handBatch_generat_cost.$message.error(data[0].msg);
//                            reloadPage('${basePath}merchant/mProjectType/enterBatchGeneratCost');
                        }
                    };
                    $("#uploadForm").ajaxSubmit(option);
                    return false;
                },
                getProject:function(){
                    var options= {projectTypeId:this.generatForm.selectProjectType};
                    if(this.generatForm.selectProjectType == ""){
                        handBatch_generat_cost.generatForm.selectCostName = "";
                        return;
                    }
                    sendService('${basePath}merchant/mProjectType/getProjectNameMenu', options, function (resData) {
                        if(resData.status == 'success'){
                            handBatch_generat_cost.pName = resData.t.mProject;
                            if(handBatch_generat_cost.generatForm.selectProjectType == ''){
                                handBatch_generat_cost.generatForm.selectCostName = '';
                            }else if(handBatch_generat_cost.generatForm.selectProjectType != '') {
                                if (handBatch_generat_cost.pName.length == 0) {
                                    handBatch_generat_cost.$message.warning('该项目类型下无收费项目');
                                    handBatch_generat_cost.generatForm.selectCostName = '';
                                } else {
                                    handBatch_generat_cost.generatForm.selectCostName = handBatch_generat_cost.pName[0].projectId;
                                }
                            }
                        }
                    })
                },
                // 下载模板
                downloadTemp:function() {
                    window.location.href = "${basePath}merchant/mProjectType/getBatchExcelModel";
                },
                //重置
                resetForm:function(formName){
                    handBatch_generat_cost.fileName = '';
                    this.$refs[formName].resetFields();
                },
            },
            created: function () {
                    var options= {};
                    sendService('${basePath}merchant/mProjectType/getProjectTypeMenu', options, function (resData) {
                        if(resData.status == 'success'){
                            handBatch_generat_cost.pType = resData.t.mProjectType;
                        }
                    })
            }
        });



</script>

<style scoped>
    #showFileName{
        width: 100%;
        height: 28px;
        border:none;
    }
    .inputfile {
        width: 0.1px;
        height: 0.1px;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        z-index: -1;
    }
    .inputfile + label {
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        color: #fff;
        padding: 0 14px;
        display: inline-block;
        background-color: #409EFF;
        -webkit-border-radius:3px;
        -moz-border-radius:3px;
        border-radius:3px;
    }
    .inputfile:focus + label,
    .inputfile + label:hover {
        cursor: pointer;
        background: #66b1ff;
        border-color: #66b1ff;
        color: #fff;
    }

    .handBatch_generat_cost .title_generat_cost{
        height: 60px;
        line-height: 60px;
        font-size: 18px;
        padding-left: 30px;
        margin-bottom: 10px;
        color: #333333;
        background: #ffffff;
    }
    .handBatch_generat_cost .generat-form{
        background: #ffffff;
        padding: 50px 0 50px 30px;
    }
    .handBatch_generat_cost .generat-form label.el-form-item__label{
        font-size: 16px;
        color: #666666;
    }
    .handBatch_generat_cost .generat-form .el-form-item{
        margin-bottom: 50px;
    }
    .handBatch_generat_cost .generat-form .btn-item-cancel{
        margin-left: 100px;
    }
    .el-select-dropdown{
        width: 200px;
    }
    .layui-btn{
        background-color: #409EFF;
        height: 32px;
        line-height: 32px;
        -webkit-border-radius:3px;
        -moz-border-radius:3px;
        border-radius:3px;
    }
</style>
